<template>
	<view class="u-gap" :style="[gapStyle]"></view>
</template>

<script>

export default {
	name: "u-gap",
	props: {
		bgColor: {
			type: String,
			default: 'transparent ' 
		},
		
		height: {
			type: [String, Number],
			default: 30
		},
		
		marginTop: {
			type: [String, Number],
			default: 0
		},
		
		marginBottom: {
			type: [String, Number],
			default: 0
		},
	},
	computed: {
		gapStyle() {
			return {
				backgroundColor: this.bgColor,
				height: this.height + 'rpx',
				marginTop: this.marginTop + 'rpx',
				marginBottom: this.marginBottom + 'rpx'
			};
		}
	}
};
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";
</style>
